<div class="page">
    <div class="page-header">
        <div class="page-title"><i class="iconfont icon-yy-task"></i> 任务管理</div>
        <div class="page-breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{path:'/dashboard'}">Home</el-breadcrumb-item>
                <el-breadcrumb-item>任务管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <div class="page-body">
        <el-row>
            <el-col :span="10">
                <el-autocomplete :fetch-suggestions="querySuggestion" @select="query" select-when-unmatched="true" v-model="queryParams.keyword" style="width:100%" :debounce="0" :highlight-first-item="true" placeholder="任务名 g:任务组 s:任务状态">
                    <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
                </el-autocomplete>
            </el-col>
            <el-col :span="14" class="text-right">
                <el-button-group v-show="showCommandBtnGroup">
                    <el-tooltip content="恢复" v-if="showResumeBtn" placement="bottom" open-delay="500">
                        <el-button @click="resumeTask"><i class="iconfont icon-recovery"></i></el-button>
                    </el-tooltip>
                    <el-tooltip content="暂停" v-if="showPauseBtn" placement="bottom" open-delay="500">
                        <el-button @click="pauseTask"><i class="iconfont icon-pause"></i></el-button>
                    </el-tooltip>
                    <el-tooltip content="立即执行" placement="bottom" open-delay="500">
                        <el-button @click="executeTask"><i class="iconfont icon-play"></i></el-button>
                    </el-tooltip>
                    <el-tooltip content="编辑" placement="bottom" open-delay="500">
                        <el-button @click="goEditTask"><i class="iconfont icon-edit"></i></el-button>
                    </el-tooltip>
                    <el-tooltip content="复制" placement="bottom" open-delay="500">
                        <el-button @click="goCopyTask"><i class="iconfont icon-copy"></i></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="bottom" open-delay="500">
                        <el-button @click="deleteTask"><i class="iconfont icon-trash"></i></el-button>
                    </el-tooltip>
                </el-button-group>
                <el-button-group class="main-tool">
                    <el-tooltip content="创建任务" placement="bottom" open-delay="500">
                        <el-button type="primary" round @click="goCreateTask"><i class="iconfont icon-plus"></i></el-button>
                    </el-tooltip>
                    <el-tooltip content="创建临时任务" placement="bottom" open-delay="500">
                        <el-button type="primary" round @click="createQuickTask"><i class="iconfont icon-flash"></i></el-button>
                    </el-tooltip>
                </el-button-group>
            </el-col>
        </el-row>
        <div class="hr"></div>

        <div v-loading="queryLoading">
            <el-table :data="queryResult.result" :show-header="true" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="45"></el-table-column>
                <el-table-column label="状态" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.state=='WAITING'" class="text-silver">{{scope.row.state}}</span>
                        <span v-else-if="scope.row.state=='ACQUIRED'" class="text-info">{{scope.row.state}}</span>
                        <span v-else-if="scope.row.state=='COMPLETE'" class="text-success">{{scope.row.state}}</span>
                        <span v-else-if="scope.row.state=='PAUSED'" class="text-warning">{{scope.row.state}}</span>
                        <span v-else-if="scope.row.state=='ERROR'" class="text-danger">{{scope.row.state}}</span>
                        <span v-else>{{scope.row.state}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="任务" show-overflow-tooltip>
                    <template scope="scope">
                        <el-button type="text" class="no-padding" @click="$taskDetailDialog.open(scope.row.name,scope.row.group)"><span class="text-bold">{{scope.row.group + "." + scope.row.name}}</span></el-button>
                        <span class="text-silver">{{scope.row.description?(" - "+scope.row.description):""}}</span></template>
                </el-table-column>
                <el-table-column label="下次执行" width="170">
                    <template scope="scope">{{$moment(scope.row.nextFireTime).format("YYYY-MM-DD HH:mm:ss")}}</template>
                </el-table-column>
            </el-table>
            <div class="spr"></div>
            <template v-if="queryResult.result && queryResult.result.length > 0">
                <div class="text-center">
                    <el-pagination background @current-change="changePage" :current-page="queryResult.page" :page-size="queryResult.pageSize" layout="total, prev, pager, next" :total="queryResult.resultTotal"></el-pagination>
                </div>
            </template>
        </div>

    </div>
    <!--Dialog-->
    <quick-task-dialog :visible.sync="quickTaskDialogVisible"></quick-task-dialog>
</div>